import React from "react";
import {Table, Breadcrumb, Button, Input, message} from 'antd';
import CustomLayout from "../../../components/CustomLayout/customLayout";
import {_deleteComUserById, _queryComUserPage} from "../../../utils/apiList";

const {Search} = Input;

class RentUserList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            tabData: [],
            pageSize: 10,
            pageNum: 1,
            total: 0,
            tabLoading: false,
        };
    }

    componentDidMount() {
        this.loadTable()
    }

    loadTable() {
        const {pageNum, pageSize} = this.state;
        this.setState({tabLoading: true});
        _queryComUserPage({pageNo: pageNum, pageSize}).then((res) => {
            if (res.data.success) {
                this.setState({
                    tabData: res.data.data.list ? res.data.data.list : [],
                    total: res.data.data.total ? res.data.data.total : [],
                    tabLoading: false,
                })
            } else {
                message.error(<b>{res.data.msg}</b>, 3);
            }
        }).catch(error => {
            message.error(<b>请求失败！</b>, 3);
        });
    }

    changePageSize(pageSize, current) {
        this.setState({pageSize, pageNum: 1}, () => this.loadTable())
    }

    changePage(current) {
        this.setState({pageNum: current}, () => this.loadTable())
    }

    updateRecord = (record) => {

    };

    deleteRecord = (id) => {
        _deleteComUserById({id}).then((res) => {
            if (res.data.success) {
                message.success(<b>删除成功</b>, 3);
                this.loadTable();
            } else {
                message.error(<b>{res.data.msg}</b>, 3);
            }
        }).catch(error => {
            message.error(<b>请求失败！</b>, 3);
        });
    };


    render() {
        const {tabData, pageSize, pageNum, total, tabLoading} = this.state;
        const columns = [
            {
                title: '个人信息',
                children: [
                    {
                        title: '微信ID',
                        dataIndex: 'userInfo.wechatNum',
                        key: 'wechatNum',
                        width: 200,
                        align: 'center'
                    },
                    {
                        title: '真实姓名',
                        dataIndex: 'userInfo.realName',
                        key: 'realName',
                        width: 150,
                        align: 'center'
                    },
                    {
                        title: '联系手机',
                        dataIndex: 'phone',
                        key: 'phone',
                        align: 'center'
                    },
                ]
            },
            {
                title: '公司信息',
                children: [
                    {
                        title: '公司名称',
                        dataIndex: 'companyName',
                        key: 'companyName',
                        align: 'center'
                    },
                    {
                        title: '职位',
                        dataIndex: 'jobs',
                        key: 'jobs',
                        align: 'center'
                    },
                ]
            },
            {
                title: '状态',
                dataIndex: 'auditCn',
                key: 'auditCn',
                align: 'center'
            },
            {
                title: '操作',
                key: 'operation',
                width: 300,
                align: 'center',
                render: (text, record) => (<div>
                    <Button style={{marginRight: 10}} type="primary">修改</Button>
                    <Button style={{marginRight: 10}} type="danger"
                            onClick={() => this.deleteRecord(record.id)}>删除</Button>
                    <Button>备注</Button>
                </div>),
            },
        ];
        const expandedRowRender = (record) => {
            return (<div>
                    {
                        record.userInfo ? Object.keys(record.userInfo).map(key => <span className={'expandedInfo'}
                                                                                        key={key}><span
                            className={'expandedInfoTitle'}>{key}:</span><span>{record.userInfo[key]}</span></span>) : null
                    }
                    {
                        record.userCompany ? Object.keys(record.userCompany).map(key => <span className={'expandedInfo'}
                                                                                              key={key}><span
                            className={'expandedInfoTitle'}>{key}:</span><span>{record.userCompany[key]}</span></span>) : null
                    }
                </div>
            )
        };
        const rowSelection = {
            onChange: (selectedRowKeys, selectedRows) => {
                console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
            },
            onSelect: (record, selected, selectedRows) => {
                console.log(record, selected, selectedRows);
            },
            onSelectAll: (selected, selectedRows, changeRows) => {
                console.log(selected, selectedRows, changeRows);
            },
        };
        return (
            <CustomLayout>
                <Breadcrumb style={{margin: '16px 0'}}>
                    <Breadcrumb.Item>用户管理</Breadcrumb.Item>
                    <Breadcrumb.Item>租借用户信息库</Breadcrumb.Item>
                </Breadcrumb>
                <div className={'App-Section'}>
                    <div style={{margin: 10}}>
                        <Button style={{marginRight: 10}} type="primary">批量导出</Button>
                        <Search style={{width: 300, float: 'right'}} placeholder="查找用户"
                                onSearch={value => console.log(value)} enterButton/>
                    </div>
                    <Table
                        bordered
                        columns={columns}
                        rowKey={'id'}
                        loading={tabLoading}
                        rowSelection={rowSelection}
                        expandedRowRender={expandedRowRender}
                        dataSource={tabData}
                        pagination={{
                            showSizeChanger: true,
                            showQuickJumper: false,
                            showTotal: () => `共${total}条`,
                            pageSize: pageSize,
                            current: pageNum,
                            total,
                            onShowSizeChange: (current, pageSize) => this.changePageSize(pageSize, current),
                            onChange: (current) => this.changePage(current),
                        }}
                    />
                </div>
            </CustomLayout>
        );
    }
}

export default RentUserList;